import bigForm from '../searchForm/bigSearchForm.js'
import bigTable from '../dhTable.js'
import {getToken} from '../../utils/auto.js'
import commonConfig from '../../utils/common.js'

export default {
    name: 'dhPage',
    data() {
        return {
            // height: '800px',
            name: 'name',
            formData: {},
            rules: {},
            pageSizes: [10, 20, 50, 100],
            presentSelectList: [],
            tableHeight: 0,

            upload: {
                // 设置上传的请求头部
                headers: {Authorization: "Bearer " + getToken()},
                // 上传的地址
                url: commonConfig.baseUrl + "/system/user/importData"
            }
        };
    },
    props: {
        formDetail: Object,
        operationDetail: Array,
        tableDetail: Object,
        paginationDetail: Object,
        height: {
            type: String,
            default: null
        },
    },
    methods: {
        sortChange(e) {
            console.log(e)

        },
        initFormData() {
            if (this.formDetail) {
                let data = {}
                this.formDetail.formArray.forEach((item, index) => {
                    data[item.basicInfo.name] = item.basicInfo.defaultValue || null
                })
                this.formData = data
            }
        },
        handleSelectionChange(selection) {
            this.presentSelectList = selection
            this.upTransmit('selectionChange', {selection})
        },

        handleSelection(selection, row) {
            console.log(selection)
            console.log(row)
            this.upTransmit('selection', {selection, row})
        },

        cellClick(row, column, cell, event) {
            this.upTransmit('cell-click', {row, column, cell, event})
        },
        cellDblclick(row, column, cell, event) {
            this.upTransmit('cell-dblclick', {row, column, cell, event})
        },
        cellContextmenu(row, column, cell, event) {
            this.upTransmit('cell-contextmenu', {row, column, cell, event})
        },
        rowClick(row, column, event) {
            this.upTransmit('row-click', {row, column, event})
        },
        rowContextmenu(row, column, event) {
            this.upTransmit('row-contextmenu', {row, column, event})
        },
        rowDblclick(row, column, event) {
            this.upTransmit('row-dblclick', {row, column, event})
        },


        handleSizeChange() {
            this.paginationDetail.pageNum = 1
            this.$emit('change-page')
        },

        handleCurrentChange() {
            this.$emit('changePage')
        },

        changeFormDataItem(key, value) {
            this.$refs.formRef.changeFormDataItem(key, value)
        },

        resetForm() {
            this.$refs.formRef.reset()
        },

        updateForm(key, value) {
            this.formData[key] = value
        },

        getFormData() {
            return this.formData
        },

        //暴露form的验证对象
        verificationForm() {
            return this.$refs.formRef.verificationForm()
        },

        /**
         * 提交方法至父组件
         * @param me 方法名
         * @param ob  传参对象
         */
        upTransmit(me, ob) {
            this.$emit(me, ob)
        },

        /**
         * 获取table高度
         */
        getTableHeight() {
            setTimeout(() => {
                let formH = this.$refs.formRef ? this.$refs.formRef.$el.offsetHeight : 0
                let btnH = this.$refs.btnRef ? this.$refs.btnRef.$el.offsetHeight : 0
                let pagingH = this.$refs.pagingRef ? this.$refs.pagingRef.offsetHeight + 10 : 0
                let pageH = this.height || document.documentElement.clientHeight
                this.tableHeight = pageH - pagingH - btnH - formH - 22
            }, 200)

        },

        /**
         * 分页刷新
         */
        pageRefresh(){
            console.log(121212)
            this.paginationDetail.pageNum = 1
            this.$emit('change-page')
        }
    },
    watch: {
        formData: {
            handler(newValue, oldValue) {
                this.$nextTick(() => {
                    this.getTableHeight()
                })
            },
            deep: true
        }
    },

    components: {
        bigForm,
        bigTable,
    },
    mounted() {
        this.initFormData()
        this.getTableHeight()
        // on(document.body, 'resize', this.handleResize)
        // 监听缩放
        this.$nextTick(() => {
            const _this = this
            window.addEventListener('resize', _this.getTableHeight)
        })

    },
    beforeDestroy() {
        // 移除绑定的onResize事件监听
        window.removeEventListener("resize", this.getTableHeight);
    },

    computed: {},

    template:
        `
        <div ref="dhPageRef" class="big-page-c">
            <el-scrollbar style="width: 100%; height: 47px;" ref="btnRef" v-if="operationDetail && operationDetail.length>0">
                <div style="display: flex; padding-bottom: 15px;">
                    <template   v-for="(item,index) in operationDetail">
                        <el-button :type="item.type" :plain="item.plain" :icon="item.beforeIcon" :round="item.round" @click="item.method" v-if="!item.hide"> {{item.value}} </el-button>

                    </template>
                </div>
            </el-scrollbar>
            
            <big-form :form-detail="formDetail" ref="formRef" :form-data="formData" v-if="formDetail" v-bind="$attrs" @changeFormFold="getTableHeight">
                <template v-for="(item,index) in formDetail.formArray" #[item.basicInfo.slotName]="{form}">
                        <slot :name='[item.basicInfo.slotName]' :form="form"></slot>
                </template>
            </big-form>
            <el-table :data="tableDetail.tableData"  ref="tableRef" :max-height="tableHeight" class="page-table"
                @selection-change="handleSelectionChange" @select="handleSelection" v-if="tableDetail" @cell-click="cellClick" 
                @cellDblclick="cell-dblclick"
                @cellContextmenu="cell-contextmenu"
                @rowClick="row-click"
                @rowContextmenu="cell-contextmenu"
                @rowDblclick="cell-dblclick"
                @sort-change="sortChange">
                <el-table-column type="selection" width="55" v-if="tableDetail.tableLayout && tableDetail.tableLayout.selected"></el-table-column>
                <el-table-column :fixed="item.fixed" :prop="item.prop" :sortable="item.sort" :label="item.label" :width="item.width || ''" v-for="(item,index) in tableDetail.tableLabel" align="center">
                    <template #default="scope">
                        <slot :name="item.slotName" v-if="item.slotName" :scope="scope">
                            {{scope.row[item.prop]}}
                        </slot>
                    </template>
                </el-table-column>
                <el-table-column v-if="tableDetail.operationDetail" align="center">
                    <template #default="scope">
                        <template v-for="(item,index) in tableDetail.operationDetail">
                            <el-button link type="primary" :icon="item.icon" @click="item.method?item.method(scope):''"  v-if="!item.type"> {{item.name}} </el-button>
                            <el-dropdown v-else :style="{marginLeft: index && tableDetail.operationDetail[index-1].name!==item.name ?'12px':0}" trigger="click" popper-class="table-dropdown">
<!--                            <span>000</span>-->
                                 <el-button link type="primary" :icon="item.icon" @click="item.method" style="margin-top: 1.5px;"> {{item.name}} </el-button>
                                 <template #dropdown>
                                    <template v-for="concealItem in item.detail">
                                        <el-dropdown-item>
                                            <el-button link type="primary" :icon="concealItem.icon" @click="concealItem.method?concealItem.method(scope):''"> {{concealItem.name}} </el-button>
                                        </el-dropdown-item>
                                    </template>
                                </template>
                            </el-dropdown>
                        </template>
                        
                        
                    </template>
                </el-table-column>
            </el-table>
            
            <div class="clearfix" style="width: 100%; margin-top: 10px" ref="pagingRef" v-if="paginationDetail">
                <el-link type="primary" :underline="false" class="page-refresh" @click="pageRefresh">
                  <el-icon :size="18"><RefreshRight /></el-icon>
                </el-link>

                <el-pagination 
                    style="float:right;"
                    v-model:current-page="paginationDetail.pageNum"
                    v-model:page-size="paginationDetail.pageSize"
                    :page-sizes="[10, 20, 30, 40, 50, 100]"
                    :pager-count="7"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="paginationDetail.total"
                    :hide-on-single-page="true"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                ></el-pagination>
               
                
            </div>
        </div>
    `

}

